<template>
  <div class="">
      <my-table :tableData="list">
          <template #action="{i}">
               <button @click="del(i)">删除</button>
          </template>
      </my-table>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import myTable from '@/components/myTable.vue';
export default {
  components: { myTable },
  setup() {
    const data = reactive({
        list:[
            {name:'张麻子',age:28,hobby:'干死黄四郎'},
            {name:'张飞',age:58,hobby:'吃豆芽'},
            {name:'左护法',age:38,hobby:'砍一刀'},
            {name:'左二护法',age:48,hobby:'看小电影'},
            {name:'西门庆',age:48,hobby:'潘金莲'}
        ]
    })
    const del = (i) => {
        data.list.splice(i,1);
    }
    return{
      ...toRefs(data),
      del
    }
  },
};
</script>
<style lang="scss" scoped>
</style>